<template>
  <div class="home_mine">
    <van-collapse class="home_mine-collapse" v-model="activeNames">
      <van-collapse-item title="我喜欢的音乐" name="1" icon="like-o">
        <van-swipe-cell v-for="(item, index) in likeMusicList" :key="index">
          <music-item
            :id="Number(item.id)"
            :artists="item.artists"
            :musicIndex="index"
            :name="item.name"
            :album="item.album"
          ></music-item>
          <template v-slot:right>
            <van-button square type="danger" text="删除" />
          </template>
        </van-swipe-cell>
      </van-collapse-item>
      <van-collapse-item title="我收藏的歌单" name="2" icon="star-o">
        <van-swipe-cell v-for="(item, index) in likePlayList" :key="index">
          <play-list
            class="home_mine_playlist"
            :id="Number(item.id)"
            :creater="item.creater"
            :name="item.name"
            :coverImgUrl="item.coverImgUrl"
            :count="item.trackCount"
          ></play-list>
          <template v-slot:right>
            <van-button square type="danger" text="删除" />
          </template>
        </van-swipe-cell>
      </van-collapse-item>
    </van-collapse>
  </div>
</template>

<script lang='ts'>
import { defineComponent, reactive, toRefs } from "vue";
import { MusicItem, PlayList } from "@/components";
import storage, { EStorage } from "@/core/storage";
export default defineComponent({
  name: "HomeMine",
  components: {
    MusicItem,
    PlayList,
  },
  setup() {
    const state = reactive({
      activeNames: ["1"],
      /** 喜欢的音乐 */
      likeMusicList: [],
      /** 收藏的歌单 */
      likePlayList: [],
    });
    /** 初始化两个列表 */
    const initMineList = () => {
      state.likeMusicList = storage.get(EStorage.favMusicList) || [];
      state.likePlayList = storage.get(EStorage.favPlayList) || [];
    };
    initMineList();
    return {
      ...toRefs(state),
      initMineList,
    };
  },
});
</script>

<style lang='scss' scoped>
.home_mine {
  height: 100%;
  overflow: auto;
  .home_mine-collapse {
    :deep() .van-cell {
      position: sticky;
      top: 0;
      left: 0;
      background: #ffffff;
      z-index: 50;
    }
    :deep() .van-button {
      height: 100%;
    }
    .home_mine_playlist {
      margin: 5px 0;
    }
  }
}
</style>